
var effectDom = document.getElementById('effectBtn');
effectDom.addEventListener('click', effect);
var editObjDom = document.getElementById('editObjBtn');
editObjDom.addEventListener('click', editObj);
var texDom = document.getElementById('tex');

// 副作用函数:修改公共数据，可能影响其他函数
function effect() {
    texDom.innerHTML = obj.text;
    console.log(obj.text);
}

function editObj() {
    obj.text = "你好 世界";
    console.log(obj.text);
}

// 存储副作用函数的桶
const bucket = new Set();//Set（集合）是一组唯一值的集合
// 对原始数据的代理
const data = { text: 'hello word' }
const obj = new Proxy(data, { // Proxy代理来拦截
    // 拦截读取操作
    get(target, key) {
        // 将副作用函数 effect 添加到存储副作用函数
        bucket.add(effect);
        console.log("【get】target:", target, "key:", key);
        // 返回属性值
        return target[key];
    },
    set(target, key, newValue) {
        console.log("【set】target:", target, "key:", key, "newValue:", newValue);
        // 设计属性值
        target[key] = newValue
        // 把副作用函数从桶里取出并执行
        bucket.forEach(fn => fn())
        // 返回 true 代表设置操作成功
        return true
    }
})
